<template>
	<view class="content flex-clo flex-sc">
		<image class="bg" src="/static/logo.png"></image>
		<view class="classification">
			<span v-for="(item, index) in data.classification">
				{{ item.name }}
				<span v-if="index != data.classification.length - 1">/</span>
			</span>
		</view>
		<view class="card flex-clo flex-sc">
			<view class="opera-area">
				<image
					src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.588' height='15.587' viewBox='0 0 15.588 15.587'%3E%3Cg data-name='17' fill='%23fff'%3E%3Cpath data-name='7' d='M14.746 7.355a.842.842 0 0 1-.843-.843V2.354a.669.669 0 0 0-.669-.669H9.056a.843.843 0 1 1 0-1.685h4.179a2.356 2.356 0 0 1 2.354 2.354V6.51a.847.847 0 0 1-.844.844zm0 0'/%3E%3Cpath data-name='8' d='M7.804 8.64a.843.843 0 0 1-.6-1.438l6.5-6.5a.842.842 0 1 1 1.191 1.191l-6.5 6.5a.834.834 0 0 1-.6.247zm0 0'/%3E%3Cpath data-name='9' d='M12.066 15.587H2.381a2.387 2.387 0 0 1-2.384-2.384V3.514a2.387 2.387 0 0 1 2.384-2.385h2.775a.843.843 0 0 1 0 1.685H2.381a.7.7 0 0 0-.7.7v9.685a.7.7 0 0 0 .7.7h9.685a.7.7 0 0 0 .7-.7v-2.765a.843.843 0 1 1 1.685 0v2.765a2.386 2.386 0 0 1-2.385 2.388zm0 0'/%3E%3C/g%3E%3C/svg%3E"
				></image>
				<image
					src="data:image/svg+xml,%3Csvg data-name='Iconly/Light-outline/Heart' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath data-name='Heart' d='M9.692 17.83l-.2-.123a28.96 28.96 0 0 1-5-3.894 10.283 10.283 0 0 1-2.487-3.956 6.463 6.463 0 0 1 .167-4.581 5.248 5.248 0 0 1 3.231-2.931 5.47 5.47 0 0 1 4.375.451l.22.132.223-.133a5.477 5.477 0 0 1 4.151-.512l.222.066a5.256 5.256 0 0 1 3.234 2.934 6.484 6.484 0 0 1 .167 4.592 10.411 10.411 0 0 1-2.48 3.947 28.979 28.979 0 0 1-5 3.887l-.191.119a.612.612 0 0 1-.635.005zM5.776 3.505a4.056 4.056 0 0 0-2.51 2.304 5.231 5.231 0 0 0-.109 3.663 9.178 9.178 0 0 0 2.178 3.473 27.713 27.713 0 0 0 4.782 3.721l-.118-.075.389-.245a27.693 27.693 0 0 0 3.829-2.978l.44-.418a9.138 9.138 0 0 0 2.182-3.467 5.237 5.237 0 0 0-.108-3.673 4.061 4.061 0 0 0-2.51-2.307 4.257 4.257 0 0 0-3.856.65.611.611 0 0 1-.721.008l-.164-.118a4.249 4.249 0 0 0-3.7-.54zm8.214 4.5a1.651 1.651 0 0 0-1.135-1.442.609.609 0 1 1 .371-1.16 2.869 2.869 0 0 1 1.98 2.5.61.61 0 0 1-.557.658h-.052a.609.609 0 0 1-.607-.56z' fill='%23fff'/%3E%3C/svg%3E"
				></image>
				<image
					src="data:image/svg+xml,%3Csvg data-name='Iconly/Light-outline/Chat' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath data-name='Chat' d='M6.099 17.374l-.038-.014a.014.014 0 0 1-.008-.01l-.568-.322a.625.625 0 0 0-.23-.045.387.387 0 0 0-.094.01 14.736 14.736 0 0 1-1.809.523l-.112.013h-.035a.932.932 0 0 1-.736-.3 1.146 1.146 0 0 1-.246-.762l.016-.137a15.354 15.354 0 0 1 .564-1.837.441.441 0 0 0-.036-.336l-.153-.3a8.338 8.338 0 0 1 7.403-12.19h.032a8.333 8.333 0 1 1-3.95 15.707zm-.143-1.407c.076.037.174.089.308.164l.352.2h.005l.239.122a7.193 7.193 0 0 0 7.688-.917l.184-.156a7.171 7.171 0 0 0-4.691-12.551h-.234a7.169 7.169 0 0 0-6.159 10.494l.151.294a1.62 1.62 0 0 1 .104 1.25 14.783 14.783 0 0 0-.536 1.738l.078-.307.329-.086c.238-.066.461-.134.683-.207l.349-.12a1.7 1.7 0 0 1 .451-.061 1.82 1.82 0 0 1 .699.143zm6.835-5.966a.951.951 0 1 1 .951.951.951.951 0 0 1-.951-.952zm-3.7 0a.951.951 0 1 1 .951.951.951.951 0 0 1-.949-.952zm-3.7 0a.951.951 0 1 1 .951.951.951.951 0 0 1-.946-.952z' fill='%23fff'/%3E%3C/svg%3E"
				></image>
			</view>
			<view class="title-area">{{ data.title }}</view>
			<view class="detail-area">{{ data.content }}</view>
			<view class="ingredients-area flex-clo">
				<view class="ingredients-item flex-row flex-justify-sb" v-for="item in data.ingredients" :key="data.ingredients.name">
					<view class="name">{{ item.name }}</view>
					<view class="quantity">{{ item.quantity }}</view>
				</view>
			</view>
			<view class="extend-btn"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {
				title: '黄瓜沙拉炒饭',
				content:
					'黄瓜沙拉炒饭是用各种凉透的熟料或是可以直接食用的生料加工成较小的形状后，再加入调味品或浇上各种冷沙司或冷调味汁拌制而成的。天气越来越热，来一份清爽的沙拉开开胃吧～',
				ingredients: [
					{
						name: '黄瓜',
						quantity: '100g'
					},
					{
						name: '菠菜',
						quantity: '80g'
					},
					{
						name: '米饭',
						quantity: '60g'
					},
					{
						name: '鸡蛋',
						quantity: '100g'
					},
					{
						name: '千岛酱',
						quantity: '10g'
					}
				],
				classification: [{ name: '自制' }, { name: '自制' }, { name: '自制' }]
			}
		};
	},
	onLoad() {},
	methods: {
		toMain() {
			uni.navigateTo({
				url: '../../home/index',
				animationType: 'slide-in-bottom',
				animationDuration: 600
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	position: relative;
	.bg {
		width: 100%;
		height: 50%;
	}
	.classification {
		top: 40%;
		position: absolute;
		span {
			font-size: 30rpx;
			margin: 10rpx;
			color: #ffffff;
		}
	}
	.card {
		top: 45%;
		position: absolute;
		width: 600rpx;
		background: $-color-theme-3;
		border-radius: 60rpx;
		margin-bottom: 40rpx;
		.opera-area {
			margin-top: 40rpx;
			image {
				width: 50rpx;
				height: 50rpx;
				margin: 0 30rpx;
			}
		}
		.title-area {
			padding: 16rpx;
			border-radius: 45rpx;
			background: $-color-theme-1;
			color: $-color-theme-3;
			font-size: 30rpx;
		}
		.detail-area {
			margin: 30rpx 60rpx;
			color: #ffffff;
			font-size: 24rpx;
		}
		.ingredients-area {
			margin-bottom: 40rpx;
			width: 480rpx;
			border: 1rpx solid $-color-theme-1;
			.ingredients-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				color: #ffffff;
				font-size: 30rpx;
				margin: 16rpx;
			}
		}
	}
}
</style>
